<template>
	<view>
		<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
		<view class="myheader padding-sm font-sub-title">
			<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
			我的二维码
		</view>
		<view @longpress="saveImg" style="margin-top: 100rpx;" class="flex justify-center margin-top margin-bottom" v-if="userInfo.IMEI">
			<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
		</view>
		<view v-if="userInfo.IMEI" class="text-center font-normal">长按保存图片</view>
		<view v-else class="font-normal text-center margin-top">
			您还未绑定设备！
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/lib/uqrcode.js'
	var that;
	export default {
		data() {
			return {
				//二维码
				qrcodeSize: 200,
				userInfo:'',
				statusBarHeight:Vue.prototype.StatusBar,
			}
		},
		onShow() {
			that =this;
			this.userInfo=uni.getStorageSync("userInfo")
			if(this.userInfo.IMEI){
				uQRCode.make({
					canvasId: 'qrcode',
					text: that.userInfo.IMEI,
					size: that.qrcodeSize,
					success: res => {
						
					},
					complete: () => {
						
					}
				})
			}
		},
		methods: {
			saveImg(){
				uni.showActionSheet({
				    itemList: ['保存图片'],
				    success: function (res) {
						uni.canvasToTempFilePath({
						canvasId: 'qrcode',
						fileType: 'jpg',
						x: 0,
						y: 0,
						width: that.qrcodeSize,
						height: that.qrcodeSize,
						destWidth: that.qrcodeSize,
						height: that.qrcodeSize,
						success: function(res) {
							// 在这里保存图片
							uni.saveImageToPhotosAlbum({
								filePath:res.tempFilePath,
								success(){
									uni.showToast({
										title:"保存成功",
										icon:"success"
									})
								},
								fail() {
									uni.showToast({
										title:"保存失败，请重试",
										icon:"none",
										position:"bottom"
									})
								}
							})
						},
						fail: function(error) {
						},							})
				       
				    },
				    fail: function (res) {
				        
				    }
				});
			},
		}
	}
</script>

<style>
</style>
